<template>
	<view class="index">

		<!-- 二级页面 -->
		<view v-if="tabberPageLoadFlag[0]" :style="{
			display: currentTabbarIndex === 0 ? 'block' : 'none'
		}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-a ref="pageA"></page-a>
			</scroll-view>
		</view>

		<view v-if="tabberPageLoadFlag[4]" :style="{
			display: currentTabbarIndex === 4 ? 'block' : 'none'
		}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-e :userInfoObj="userInfoObj" ref="pageE"></page-e>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[5]" :style="{ display: currentTabbarIndex === 5 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-f :userInfoObj="userInfoObj" :isShow="isPageVisible && currentTabbarIndex === 5"
					ref="pageF"></page-f>
			</scroll-view>
		</view>


		<!-- 右上角形式的tabbar按钮-->
		<!--    <view class="">
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-1" @tap.stop="changeTabbar(0)">
        <view class="tn-icon-home-love-fill" :class="[currentTabbarIndex === 0 ? 'tn-color-blue' : 'tn-color-white']"></view>
      </view>
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-2"  @tap.stop="changeTabbar(4)">
        <view class="tn-icon-ghost-fill" :class="[currentTabbarIndex === 4 ? 'tn-color-blue' : 'tn-color-white']"></view>
      </view>
    </view> 
    -->

		<!-- 预留底部导航栏 -->


		<view class="tabbar tn-bg-white">

			<div class="">
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>

				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
				<div class="g-bubble"></div>
			</div>

			<view class="action" @tap.stop="changeTabbar(0)">
				<view class="bar-icon">
					<image class="" :src="`https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/tabbar/tn-tabbar0${currentTabbarIndex === 0 ? '-curnew' : ''}.png`">
					</image>
				</view>
				<view class="" :class="[currentTabbarIndex === 0 ? 'tn-color-blue' : 'tn-color-gray']">首页</view>
			</view>
			<!-- <view class="action" @tap.stop="changeTabbar(1)">
        <view class="bar-icon">
          <image class="" :src="`/static/tabbar/tn-tabbar1${currentTabbarIndex === 1 ? '-curnew' : ''}.png`"></image>
        </view>
        <view class="" :class="[currentTabbarIndex === 1 ? 'tn-color-blue' : 'tn-color-gray']">圈子</view>
      </view> -->

			<view class="action bar-center" @tap.stop="changeTabbar(5)">
				<view class="nav-index-button">
					<view class="nav-index-button__content">
						<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="bar-circle">
								<image class="" src='https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/tabbar/tn-tabbar5.png'></image>
							</view>
						</view>
					</view>

					<view class="nav-index-button__meteor">
						<view class="nav-index-button__meteor__wrapper">
							<view v-for="(item, index) in 6" :key="index" class="nav-index-button__meteor__item"
								:style="{ transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)` }">
								<view class="nav-index-button__meteor__item--pic"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="action" @tap.stop="changeTabbar(3)">
        <view class="bar-icon">
          <image class="" :src="`/static/tabbar/tn-tabbar2${currentTabbarIndex === 3 ? '-curnew' : ''}.png`"></image>
        </view>
        <view class="" :class="[currentTabbarIndex === 3 ? 'tn-color-blue' : 'tn-color-gray']">名片</view>
      </view> -->

			<!-- <view class="action" @tap.stop="changeTabbar(5)">
				<view class="bar-icon discovery">
					<image class="" :src="`/static/tabbar/tn-tabbar5.png`"></image>
				</view>
			</view> -->

			<view class="action" @tap.stop="changeTabbar(4)">
				<view class="bar-icon">
					<image class="" :src="`https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/tabbar/tn-tabbar3${currentTabbarIndex === 4 ? '-curnew' : ''}.png`">
					</image>
				</view>
				<view class="" :class="[currentTabbarIndex === 4 ? 'tn-color-blue' : 'tn-color-gray']">我的</view>
			</view>
		</view>

		<view class="tnwave waveAnimation">
			<view class="waveWrapperInner bgTop">
				<view class="wave waveTop"
					style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
			</view>
			<view class="waveWrapperInner bgMiddle">
				<view class="wave waveMiddle"
					style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
			</view>
			<view class="waveWrapperInner bgBottom">
				<view class="wave waveBottom"
					style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
			</view>
		</view>


	</view>
</template>

<script>
import PageA from './component/PageA.vue'
import PageE from './component/PageE.vue'
import PageF from './component/PageF.vue'
import {
	queryUserInfo
} from "@/api/login";

export default {
	components: {
		PageA,
		PageE,
		PageF,
	},
	data() {
		return {
			isPageVisible: false,
			currentTabbarIndex: 5,
			userInfoObj: {},
			// 自定义底栏对应页面的加载情况
			tabberPageLoadFlag: [],
		}
	},
	async onLoad(options) {
		await this.$onLaunched
		// await this.$store.dispatch('getDictInfo')
		const requested = Number(options.index || this.currentTabbarIndex)
		const isLoggedIn = !!uni.getStorageSync('userInfo')
		// 未登录时，仅允许默认进入 PageA(index=0) 或 PageE(index=4)
		const index = isLoggedIn ? requested : ([0,4].includes(requested) ? requested : 0)
		// 根据底部tabbar菜单列表设置对应页面的加载情况
		// 现在只有 3 个页面：PageA(index=0), PageE(index=4), PageF(index=5)
		this.tabberPageLoadFlag = [false, false, false, false, false, false]
		this.tabberPageLoadFlag[index] = true
		this.changeTabbar(index)

	},
	async onShow() {
		this.isPageVisible = true;
		if (this.$store.getters.getUserInfo) {
			this.userInfoObj = this.$store.getters.getUserInfo
		} else {
			this.$store.dispatch('getUserInfo').then(res => {
				this.userInfoObj = this.$store.getters.getUserInfo
			});
		}
	},
	onHide() {
		this.isPageVisible = false;
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			return {
				// 分享的标题，默认为小程序名称
				title: '(*^▽^*)您的好友发来邀请😽！',
				// 分享的路径，默认为当前页面
				path: `/pages/login/index?shareCode=${this.userInfoObj.shareCode}`,
				// 分享时显示的图片，默认为当前页面截图
				// imageUrl: '/static/images/groupPurchase.png',
			}
		}

	},
	watch: {
		"$store.getters.getUserInfo": {
			handler: function (newVal) {
				this.userInfoObj = newVal;
				this.$refs?.pageE?.refresh();
			}
		}
	},
	methods: {

		// 导航页面滚动到底部
		tabbarPageScrollLower(e) {
			// PageB 组件已删除，此方法暂时保留以备将来扩展
		},

		// 修改当前选中的tabbar
		changeTabbar(index) {
			if (this.currentTabbarIndex === index) return
			this._switchTabbarPage(index)
			this.currentTabbarIndex = index
		},

		// 切换导航页面
		_switchTabbarPage(index) {
			// 底部tabbar短震动骚操作，真机效果很不错，模拟器忽略就行
			wx.vibrateShort();
			// 正式代码
			const selectPageFlag = this.tabberPageLoadFlag[index]
			if (selectPageFlag === undefined) {
				return
			}
			if (selectPageFlag === false) {
				this.tabberPageLoadFlag[index] = true
			}
		},


	}
}
</script>

<style lang="scss" scoped>
/* 波浪*/
.template-outset {
	// background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
	width: 100vw;
	height: 100vh;
}

@keyframes move_wave {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1)
	}

	50% {
		transform: translateX(-25%) translateZ(0) scaleY(1)
	}

	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

.tnwave {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	// bottom: 100rpx;
	bottom: calc(50rpx + constant(safe-area-inset-bottom));
	bottom: calc(50rpx + env(safe-area-inset-bottom));
	// top: 0;
	z-index: 997;
	margin: auto;
	height: 90rpx;
	// background-color: chartreuse;
}

.waveWrapperInner {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
}

.wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
}


.bgTop {
	opacity: 0.4;
}

.waveTop {
	background-size: 50% 45px;
}

.waveAnimation .waveTop {
	animation: move_wave 4s linear infinite;
}

.bgMiddle {
	opacity: 0.6;
}

.waveMiddle {
	background-size: 50% 40px;
}

.waveAnimation .waveMiddle {
	animation: move_wave 3.5s linear infinite;
}

.bgBottom {
	opacity: 0.95;
}

.waveBottom {
	background-size: 50% 35px;
}

.waveAnimation .waveBottom {
	animation: move_wave 2s linear infinite;
}


@for $i from 0 through 20 {
	.g-bubble:nth-child(#{$i}) {
		opacity: 0.2;
		border-radius: 100%;
		position: fixed;
		background: #26b4f5;
		$width: random(20)+px;
		right: #{(random(100)) + '%'};
		bottom: - #{(random(60))}px;
		width: $width;
		height: $width;
		animation: moveToTop #{(random(9500) + 1500) / 1000}s ease-in-out -#{random(9000)/1000}s infinite;
	}
}

@keyframes moveToTop {
	70% {
		opacity: 0.05;
	}

	100% {
		opacity: 0.01;
		transform: translate(-50%, -180px) scale(0.3);
	}
}




.index {
	width: 100%;
	height: 100vh;
	position: relative;

	.custom-tabbar-page {
		width: 100%;
		// height: calc(100vh - 110rpx);
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: 0rpx;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}


	/* 底部导航 statr */
	.tabbar {
		width: 100%;
		height: 45rpx;
		height: calc(45rpx + constant(safe-area-inset-bottom));
		height: calc(45rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		background-color: transparent;
		z-index: 998;
		padding-bottom: calc(65rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(65rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

		.action {
			font-size: 22rpx;
			position: relative;
			flex: 1;
			text-align: center;
			padding: 0;
			display: block;
			height: auto;
			line-height: 1;
			margin: 0;
			overflow: initial;

			.bar-icon {
				width: 100rpx;
				position: relative;
				display: block;
				height: auto;
				margin: 0 auto 10rpx;
				text-align: center;
				font-size: 42rpx;

				image {
					width: 55rpx;
					height: 55rpx;
					display: inline-block;
				}
			}

			.bar-icon.discovery {
				image {
					width: 114rpx;
					height: 114rpx;
					transform: translateY(-28rpx);
				}
			}

			.bar-circle {
				position: relative;
				display: block;
				margin: 0rpx auto 0rpx;
				text-align: center;
				font-size: 52rpx;
				line-height: 90rpx;
				width: 100rpx !important;
				height: 100rpx !important;
				overflow: hidden;

				image {
					width: 100rpx;
					height: 100rpx;
					display: inline-block;
					margin: 0rpx auto 0rpx;
				}
			}
		}

		.bar-center {
			animation: suspension 3s ease-in-out infinite;

			.nav-index-button {
				animation: suspension 3s ease-in-out infinite;
				z-index: 999999;


				&__content {
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					&--icon {
						width: 100rpx;
						height: 100rpx;
						font-size: 60rpx;
						border-radius: 50%;
						margin-bottom: 18rpx;
						position: relative;
						z-index: 1;
						transform: scale(0.85);

						&::after {
							content: " ";
							position: absolute;
							z-index: -1;
							width: 100%;
							height: 100%;
							left: 0;
							bottom: 0;
							border-radius: inherit;
							opacity: 1;
							transform: scale(1, 1);
							background-size: 100% 100%;
							// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
						}
					}
				}

				&__meteor {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100rpx;
					height: 100rpx;
					transform-style: preserve-3d;
					transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

					&__wrapper {
						width: 100rpx;
						height: 100rpx;
						transform-style: preserve-3d;
						animation: spin 20s linear infinite;
					}

					&__item {
						position: absolute;
						width: 100rpx;
						height: 100rpx;
						border-radius: 1000rpx;
						left: 0;
						top: 0;

						&--pic {
							display: block;
							width: 100%;
							height: 100%;
							background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
							background-size: 100% 100%;
							animation: arc 4s linear infinite;
						}
					}
				}
			}
		}
	}

	/* 底部导航 end */
}

@keyframes suspension {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.6rem);
	}
}

@keyframes spin {
	0% {
		transform: rotateX(0deg);
	}

	100% {
		transform: rotateX(-360deg);
	}
}

@keyframes arc {
	to {
		transform: rotate(360deg);
	}
}


/* 新*/
/* 按钮 */
.button-1 {
	background-color: rgba(0, 0, 0, 0.15);
	position: fixed;
	/* bottom:200rpx;
      right: 20rpx; */
	bottom: 24%;
	right: 30rpx;
	z-index: 1001;
	border-radius: 100px;
}

.button-2 {
	background-color: rgba(0, 0, 0, 0.15);
	position: fixed;
	/* bottom:200rpx;
      right: 20rpx; */
	bottom: 15%;
	right: 30rpx;
	z-index: 1001;
	border-radius: 100px;
}

/* 图标容器15 start */
.icon15 {
	&__item {
		width: 30%;

		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 50rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;


			}
		}
	}
}
</style>